<template>
  <div>
    <Child
      @parentFun="parentFun"
      :msg1="msg1"
      :msg2="msg2"
      :msg3="msg3"
      class="parent"
      type="success"
      ref="child"
    />
    <el-divider></el-divider>
    <!-- 这个演示eventbus -->
    <Child3></Child3>
    <!-- 这个演示v-model -->
    <!--   <MyInput
      :value="msg4"
      @input="
        (value) => {
          msg4 = value;
        }
      "
    ></MyInput> -->
    <!-- v-model1 -->
    <MyInput v-model="msg4"></MyInput>
    <!--     <MySelect
      :value="subject"
      @input="
        (value) => {
          subject = value;
        }
      "
    ></MySelect> -->
    <!-- v-model2 -->
    <MySelect v-model="subject"></MySelect>
    <!--  在 Vue2中 一个组件上只能有一个v-model, 而 .sync 修饰符可以有很多个. 实现父子组件数据之间的双向绑定, 与 v-model 类似.https://blog.csdn.net/hswwqy/article/details/125173809?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166694173516782425119225%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=166694173516782425119225&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-1-125173809-null-null.142^v62^pc_search_tree,201^v3^add_ask,213^v1^control&utm_term=vue2%20%E4%BF%AE%E9%A5%B0%E7%AC%A6.sync&spm=1018.2226.3001.4187-->
    <!--   <MySync
      :num1.sync="num1"
      @update:num1="(val) => (num1 = val)"
      :num2.sync="num2"
      @update:num2="(val) => (num2 = val)"
    ></MySync> -->
    <MySync :num1="num1" :num2="num2" @></MySync>
  </div>
</template>
<script>
import Child from './components/Child.vue'
import Child3 from './components/Child3'
import MyInput from './components/MyInput'
import MySelect from './components/MySelect'
import MySync from './components/MySync'

export default {
  name: 'day9-page',
  components: {
    Child,
    Child3,
    MyInput,
    MySelect,
    MySync
  },
  data() {
    return {
      msg1: '子组件msg1',
      msg2: '子组件msg2',
      msg3: '子组件msg3',
      parentmsg: '父组件数据',
      msg4: '123',
      subject: '2',
      num1: '1',
      num2: '2'
    }
  },
  provide() {
    return {
      provide1: 'provide1数据',
      provide2: 'provide2数据'
    }
  },
  methods: {
    parentFun(val) {
      console.log(`父组件方法被调用,获得子组件传值：${val}`)
    }
  },
  mounted() {
    // $parent: 子组件获取父组件Vue实例，可以获取父组件的属性方法等
    // $children: 父组件获取子组件Vue实例，是一个数组，是直接儿子的集合，但并不保证子组件的顺序
    console.log('childData1:', this.$children[0].childData) // [Child实例]
    // $refs可以直接获取元素属性，同时也可以直接获取子组件实例
    // 获取子组件属性
    console.log('childData2:', this.$refs.child.childData) // 子组件元素
  }
}
</script>
